<template>
  <el-dialog :model-value="visible" draggable :close-on-click-modal="false" title="添加平台客户选择运输方式" @close="handleClose" align-center destroy-on-close width="800px">
    <div class="h-[60vh]">
      <VTable ref="tableRef" v-bind="tableOptins">
        <template #form="{ form }">
          <XForm :fieldList="fieldList" :options="formOption" :formData="form" :originOption="originOption" class="mb-[8px] bg-[pink]" />
        </template>
      </VTable>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleDialogOk">确认</el-button>
       
    </template>
  </el-dialog>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
const formOption = ref({ inline: true })
const fieldList = ref([
  { field: "platform", type: "selectV2", originField: "platform", style: { width: "160px" }, options: { placeholder: "平台" } },
  { field: "site", type: "selectV2", originField: "country", style: { width: "160px" }, options: { placeholder: "平台" } },
  { field: "description", placeholder: "平台运输方式" },
])
const tableRef = ref()
// 列表配置
const tableOptins = reactive({
  formConfig: { data: {} },
  checkboxConfig: { reserve: true },
  rowConfig: { keyField: "id", isHover: true },
  columns: [
    { type: "checkbox", width: 60 },
    { field: "platform", title: "平台", width: 200 },
    { field: "site", title: "国家", width: 150 },
    { field: "description", title: "运输方式" },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = { ...page, ...form, exclude_id: props.selectIds }
        return api.apiGetShippingMethods(params)
      },
    },
  },
})

import api from "./api"

const emit = defineEmits(["update:modelValue", "submit"])
import { ElMessage } from "element-plus"

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  originOption: {
    type: Object,
    default: () => ({
      platform: [],
    }),
  },
  selectIds: {
    type: Array,
    default: () => [],
  },
})

const handleClose = () => {
  emit("update:visible", false)
}

const handleDialogOk = () => {
  let ReserveRecords = tableRef.value.$table.getCheckboxReserveRecords()
  let checkedRecords = tableRef.value.$table.getCheckboxRecords()

  checkedRecords = [...checkedRecords, ...ReserveRecords]
  if (!checkedRecords.length) {
    return ElMessage({ message: "最少选中一条数据！", type: "error" })
  }

  emit("submit", checkedRecords)
  handleClose()
}

onMounted(async () => {})
</script>

<style scoped lang="scss">
:deep(.vx-table__form-content) {
  padding-bottom: 8px;
}
</style>
